<template>
  <div class="videoArea">
    <div class="areaLeft">
      <div class="areaInfo">
        <div>
          <div class="title">{{ detailsData?.name }}</div>
          <div class="other">
            <div class="look">
              <img src="@/assets/users.png" alt="" />
              {{ canLookUserList.length || 0 }}人参与
            </div>
          </div>
        </div>
        <div class="areaRgtBtn">
          <CustomButton
            v-if="!isCreateUser && !detailsData?.joined && detailsData.status !== 'END'"
            class="customBtn"
            type="primary"
            :disabled="isJoinIng"
            @click="joinTeachFn"
          >
            {{ isJoinIng ? '审核中' : '申请加入' }}
          </CustomButton>

          <CustomButton
            v-if="!isCreateUser && isOpenSpeakInteraction && liveIng && detailsData.status !== 'END'"
            class="customBtn"
            :type="interactionStatus === 'start' ? 'danger' : 'primary'"
            :disabled="interactionStatus === 'request'"
            @click="handsUp"
          >
            {{
              interactionStatus === 'noStart'
                ? '申请连麦'
                : interactionStatus === 'request'
                ? '申请连麦中...'
                : interactionStatus === 'start'
                ? '挂断'
                : ''
            }}
          </CustomButton>
          <!-- <CustomButton
            v-if="isCanLook"
            class="customBtn"
            type="primary"
            @click="mobileLookLive"
          >
            手机端观看
          </CustomButton> -->
          <!-- <CustomButton
            v-if="isCreateUser && detailsData.status === 'NO_START'"
            class="customBtn"
            type="primary"
            @click="startTeachByIdFn"
          >
            开始集体备课
          </CustomButton> -->
          <!-- <CustomButton
            v-if="isCreateUser && !isHaveLive"
            class="customBtn"
            type="primary"
            @click="addTeachRoomFn"
          >
            创建主题会议
          </CustomButton> -->
          <CustomButton
            v-if="isCreateUser && detailsData.status !== 'END'"
            class="customBtn"
            type="primary"
            @click="lookLiveInfo"
          >
            查看直播信息
          </CustomButton>
          <CustomButton
            v-if="isCreateUser"
            class="customBtn"
            type="primary"
            @click="lookResultsModal"
          >
            上传备课结论
          </CustomButton>
          <el-badge v-if="isCreateUser && detailsData.status !== 'END'" :is-dot="!!applyUserList.length">
            <CustomButton
              class="customBtn"
              type="primary"
              @click="lookUserManage"
            >
              人员管理
            </CustomButton>
          </el-badge>
          <el-popconfirm title="确定结束备课吗？" @confirm="endTeachVideoFn">
            <CustomButton
              slot="reference"
              v-if="isCreateUser && detailsData.status !== 'END'"
              class="customBtn"
              type="primary"
            >
              结束备课
            </CustomButton>
          </el-popconfirm>
        </div>
      </div>
      <div class="areaPlay">
        <div class="lockArea" v-if="!isCanLook">暂无查看权限</div>
        <div v-if="!isCanLook" class="videoPlay">
          <img
            :src="$getImageUrl(detailsData.originImg)"
            alt=""
            srcset=""
          />
        </div>
        <!-- 直播 -->
        <div
          v-if="liveIng && isCanLook"
          id="livePlayer"
          class="videoPlay"
        ></div>
        <!-- 文档模块 -->
        <div v-if="liveIng && isCanLook" id="drawPanel" style="width: 0px; height: 0px; display: none;"></div>

        <!-- 回放 视频模块 -->
        <div
          v-if="!liveIng && isCanLook && !isGenerate"
          id="playbackPlayer"
          class="videoPlay"
        ></div>
        <!-- 文档模块 -->
        <div v-if="!liveIng && isCanLook && !isGenerate" id="playbackPanel" style="width: 0; height: 0; display: none;"></div>
        <div class="lockArea" v-if="isGenerate && isCanLook">回放生成中</div>
      </div>
    </div>
    <div class="areaRgt">
      <div class="areaUser">
        <!-- <img class="userHead" src="@/assets/footerBg.png" alt="" srcset="" /> -->
        <div class="userInfo">
          <div class="name">{{ detailsData?.promoter }}</div>
          <!-- <div class="info">湖北省优秀教师、武汉市优秀教师</div> -->
        </div>
      </div>
      <div class="areaDiscuss">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="备课进度" name="schedule">
            <div class="tabPaneItem">
              <div class="lockArea" v-if="!isCanLook">暂无查看权限</div>
              <el-empty
                v-if="!useData.length"
                description="暂无数据"
              ></el-empty>
              <el-timeline v-if="useData.length">
                <el-timeline-item
                  :timestamp="item.time"
                  placement="top"
                  v-for="(item, index) in useData"
                  :key="'line' + index"
                >
                  <div
                    :class="
                      recordId === listItem.recordId
                        ? 'playbackItem active'
                        : 'playbackItem'
                    "
                    v-for="(listItem, listIndex) in item.list"
                    :key="listIndex"
                    @click="changeLive(!listItem.endTime, listItem.recordId, listItem.taskId)"
                  >
                    <div class="title oneHidden">
                      <img src="@/assets/play_icon.png" alt="" srcset="" />
                      {{ !listItem.recordId && listItem.endTime ? '[回放生成中]' : '' }}
                      第{{ listItem.chineseIndex }}次、
                      {{ detailsData?.name }}
                    </div>
                    <div class="time">
                      <!-- {{ timeLong(listItem.startTime, listItem.endTime) }} -->
                      {{ listItem.endTime ? listItem.startTime : '直播中' }}
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>

          <el-tab-pane label="转录文稿" name="transcript">
            <div class="tabPaneItem">
              <div class="lockArea" v-if="!isCanLook">暂无查看权限</div>
              <el-empty v-if="!taskId || (summaryData && !summaryData.summary && !summaryData.chapters)" description="暂无数据"></el-empty>
              <el-empty v-if="taskId && !summaryData" description="回放总结生成中"></el-empty>
              <div class="summary" v-if="summaryData?.summary || summaryData?.chapters">
                <div class="download-area">
                  <el-link @click="downloadFile" type="primary">
                    下载AI文稿
                    <i class="el-icon-view el-icon-download"></i>
                  </el-link>
                  <div class="tips">
                    （AI识别文稿，仅做参考）
                  </div>
                </div>
                <div class="summaryContent">{{ summaryData.summary }}</div>
                <div
                  class="chapterItem"
                  v-for="(item, index) in summaryData.chapters"
                  :key="index"
                  @click="toSeek(item.start)"
                >
                  <div class="name">{{ item.headline }}</div>
                  <div class="time">{{ formatDate(item.start) }}</div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane
            :label="'参与人(' + canLookUserList.length + ')'"
            name="participant"
          >
            <div class="tabPaneItem">
              <div class="lockArea" v-if="!isCanLook">暂无查看权限</div>
              <div class="userCard">
                <img
                  class="userHead"
                  src="@/assets/footerBg.png"
                  alt=""
                  srcset=""
                />
                <div class="userInfo">
                  <div class="initiator">发起人</div>
                  <div class="name">{{ detailsData?.promoter || '无' }}</div>
                </div>
              </div>
              <div
                class="userCard"
                v-for="(item, index) in canLookUserList"
                :key="index"
              >
                <img
                  class="userHead"
                  src="@/assets/footerBg.png"
                  alt=""
                  srcset=""
                />
                <div class="userInfo">
                  <div class="info">成员</div>
                  <div class="name">{{ item?.userName }}</div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <PersonnelManage
      ref="PersonnelManage"
      :teachUserList="teachUserList"
      @updateUser="updateUser"
    ></PersonnelManage>
    <Result
      ref="Result"
      :detailsData="detailsData"
      @updateData="updateData"
    ></Result>
    <AddFromLive
      ref="AddFromLive"
      :teachId="detailsData?.objectId"
    ></AddFromLive>
    <LiveInfo ref="LiveInfo" :objectId="detailsData?.objectId"></LiveInfo>
    <QRCode v-if="roomId" ref="QRCode" :roomId="roomId" :title="detailsData?.name"></QRCode>
  </div>
</template>

<script>
import CustomButton from '@/components/CustomButton.vue';
import * as common from '@/utils/livePlay';
import PersonnelManage from './PersonnelManage.vue';
import Result from './Results.vue';
import AddFromLive from './AddFromLive.vue';
import LiveInfo from '@/components/LiveInfo.vue';
import {
  joinTeach,
  startTeachById,
  getTeachUser,
  getJoinStatus,
  getBackStatus,
  getBackContent,
  endTeachVideo,
  downContent
} from '@/api/teach';
import { getUserInfo, getToken } from '@/utils/auth';
import { toLogin } from '@/utils/baseConfig';
import QRCode from '@/components/QRCode.vue';
import { Loading } from 'element-ui'

export default {
  name: 'PalyArea',
  components: { CustomButton, PersonnelManage, Result, AddFromLive, LiveInfo, QRCode },
  props: {
    detailsData: {
      type: Object,
      default: null,
    },
  },
  computed: {
    useData() {
      const recordList =
        (this.detailsData?.teachDetailList?.length && this.detailsData?.teachDetailList[0].recordList) ||
        [];
      console.log(recordList)
      if (!recordList.length) {
        return [];
      }
      // 根据索引生成中文序数词
      const newArr = recordList.map((item, index) => {
        const chineseIndex = this.chineseIndex(recordList.length - index);
        console.log(recordList.length, index, chineseIndex);
        return {
          ...item,
          chineseIndex
        }
      })
      // 根据 startTime 分组
      const transformedData = newArr.reduce((accumulator, item) => {
        // 使用dayjs格式化 startTime 来获取日期作为键
        const dateKey = this.$dayjs(item.startTime).format('YYYY年MM月DD日');

        // 如果accumulator中还没有这个日期的数组，就创建一个
        if (!accumulator[dateKey]) {
          accumulator[dateKey] = {
            time: dateKey,
            list: [],
          };
        }

        // 将时间段对象添加到对应日期的数组中
        accumulator[dateKey].list.push(item);
        return accumulator;
      }, {});

      // 将对象转换为数组
      const result = Object.values(transformedData);
      return result;
    },
    // 是否是发起人
    isCreateUser() {
      return getUserInfo()?.objectId === this.detailsData?.creater;
    },
    // 是否有查看权限
    isCanLook() {
      return (
        this.detailsData?.joined ||
        getUserInfo()?.objectId === this.detailsData?.creater
      );
    },
    // 能查看的列表
    canLookUserList() {
      const agreeList = this.teachUserList.filter((item) => {
        return item.status === 'AGREE';
      });
      return agreeList || [];
    },
    // 审核中的列表
    applyUserList() {
      const applyList = this.teachUserList.filter((item) => {
        return item.status === 'APPLY';
      });
      return applyList || [];
    },
    // 是否已经创建过主题会议
    isHaveLive() {
      return !!this.detailsData.teachDetailList?.length;
    },
    isLogin() {
      return !!getToken();
    },
  },
  data() {
    return {
      activeName: 'schedule',
      recordId: null, // 当前回放id
      roomId: null, // roomId
      liveIng: false, // 是否在直播中
      teachUserList: [], // 参与人
      isJoinIng: false, // 是否审核中
      isGenerate: false, // 是否回放生成中
      taskId: null, // 回放总结任务Id
      isHaveLiveList: false, // 是否有直播或者回放映
      isOpenSpeakInteraction: false, // 是否开启连麦
      interactionStatus: 'noStart', // noStart：未开始，request：申请中，start：进行中
      summaryData: null,
    };
  },
  created() {},
  mounted() {
    if (this.isCanLook) {
      this.initLiveSDK();
    } else {
      this.getJoinStatusFn();
    }
    this.getTeachUserFn();
  },

  // 销毁前的回调
  beforeDestroy() {
    if (this.isHaveLive) {
      if (this.isHaveLiveList) {
        if(this.liveIng) {
          window.DWLive.destroy()
        } else if(this.recordId) {
          window.$.DW.destroy();
        }
      }
    }
  },
  methods: {
    // 申请人 未加入时 查询申请状态
    async getJoinStatusFn() {
      try {
        const params = {
          objectId: this.detailsData.objectId,
        };
        const resData = await getJoinStatus(params);
        if (resData?.status === 'APPLY') {
          this.isJoinIng = true;
        } else {
          this.isJoinIng = false;
        }
      } catch (error) {
        console.error(error);
      }
    },
    // 初始化视频
    initLiveSDK() {
      // 是否有直播房间
      if (this.isHaveLive) {
        // 房间id
        this.roomId = this.detailsData?.teachDetailList[0].roomId;
        // 是否有直播或者回放
        this.isHaveLiveList = !!this.detailsData.teachDetailList[0].recordList?.length
        if (this.isHaveLiveList) {
          // 是否直播中
          this.liveIng =
            !this.detailsData.teachDetailList[0].recordList[0].endTime;
          // 如果直播中
          if (this.liveIng) {
            this.createdLive();
          } else {
            this.taskId = this.detailsData?.teachDetailList[0].recordList[0].taskId || null;
            this.recordId = 
              this.detailsData?.teachDetailList[0].recordList[0].recordId;
            this.createdLiveBack();
            if(this.taskId && this.recordId) {
              this.getLiveBackSummaryStatus()
            }
          }
        }
      }
    },
    // 创建直播
    createdLive() {
      common.initSdk({
        roomid: this.roomId,
        viewername: getUserInfo()?.name,
      });
      this.liveInit();
    },
    liveInit() {
      const that = this;
      // 直播间配置回调 连麦、模式切换
      window.DWLive.onRoomSetting = function (data) {
        var isOpenSpeakInteraction = data.allow_speak_interaction;
        if (isOpenSpeakInteraction === 'true') {
          that.isOpenSpeakInteraction = true;
        } else {
          that.isOpenSpeakInteraction = false;
        }
      };
      // 讲师接受视频/语音互动
      window.on_cc_live_interaction_accept = function (data) {
        if (data.audio) {
          that.interactionStatus = 'start';
        }
      };
      // 讲师挂断 视频/语音 互动
      window.on_cc_live_interaction_disconnect = function (data, type) {
        console.log(data, type);
        window.DWLive.hangupInteraction();
        that.interactionStatus = 'noStart';
      };
    },
    // 直播时用户点击 申请连麦/挂断 按钮
    handsUp() {
      // 申请
      if (this.interactionStatus === 'noStart') {
        console.log('申请连麦:', window.DWLive);
        window.DWLive.requestInteraction({
          video: false,
          audio: true,
        });
        this.interactionStatus = 'request';
      }
      // 挂断
      if (this.interactionStatus === 'start') {
        window.DWLive.hangupInteraction();
        this.interactionStatus = 'noStart';
      }
    },
    // 创建回放
    createdLiveBack() {
      const that = this;
      if (!this.recordId) {
        that.isGenerate = true;
        return;
      }
      that.isGenerate = false;
      common.initBackSdk({
        roomid: that.roomId,
        recordId: that.recordId,
        viewername: getUserInfo()?.name,
      });
      that.initBack();
    },
    // 监听回放
    initBack() {
      const that = this;
      window.on_cc_login_error = function(error) {
        if(error.message === 'replay deleted') {
          that.$message.error('回放已删除');
        } else {
          that.$message.error('回访加载发生错误');
        }
      }
      window.on_cc_live_player_load = function () {
        document.querySelector('video').addEventListener('contextmenu', function(e) {
          e.preventDefault();
        });
      }
    },
    // 获取回放总结状态和内容
    async getLiveBackSummaryStatus() {
      const params = {
        recordId: this.recordId,
        taskId: this.taskId
      }
      const resData = await getBackStatus(params);
      console.log(resData);
      if(resData === '10') {
        const backContentData = await getBackContent(params);
        console.log(backContentData);
        this.summaryData = backContentData;
      } else {
        this.summaryData = null;
      }
      
    },
    // 跳转到固定时间
    toSeek(time) {
      window.$.DW.seek(time/1000);  
    },
    // 点击tab
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 时间换算时长
    timeLong(startDate, endDate) {
      if (!endDate) {
        return '直播中';
      }
      const start = this.$dayjs(startDate);
      const end = this.$dayjs(endDate);
      const diff = end.diff(start);
      // dayjs.duration()返回一个Duration对象，可以被格式化
      return this.$dayjs.duration(diff).format('HH:mm:ss', { trim: false });
    },
    // 打开人员管理
    lookUserManage() {
      this.$refs.PersonnelManage.dialogVisible = true;
    },
    // 打开 结果modal
    lookResultsModal() {
      this.$refs.Result.dialogVisible = true;
    },
    // 申请加入集体备课
    async joinTeachFn() {
      if(!this.isLogin) {
        return toLogin();
      }
      try {
        const params = {
          objectId: this.detailsData.objectId,
        };
        await joinTeach(params);
        this.isJoinIng = true;
        this.$message.success('申请成功，等待审核');
      } catch (error) {
        console.error(error);
      }
    },
    // 开始集体备课
    async startTeachByIdFn() {
      try {
        const params = {
          objectId: this.detailsData.objectId,
        };
        await startTeachById(params);
        this.$emit('updateData');
        this.$message.success('备课开始');
      } catch (error) {
        console.error(error);
      }
    },

    // 查看所有集体备课人员
    async getTeachUserFn() {
      try {
        const params = {
          objectId: this.detailsData.objectId,
        };
        const resData = await getTeachUser(params);
        this.teachUserList = resData;
      } catch (error) {
        console.error(error);
      }
    },

    // 创建会议
    async addTeachRoomFn() {
      this.$refs.AddFromLive.dialogVisible = true;
      this.updateData();
    },
    // 更新数据
    updateData() {
      this.$emit('updateData');
    },
    // 更新参与人
    updateUser() {
      this.getTeachUserFn();
    },
    // 切换直播回放
    changeLive(isLive, recordId, taskId) {
      if(window.DWLive && window.DWLive.destroy) {
        window.DWLive.destroy()
      }
      if(window.$ && window.$.DW && window.$.DW.destroy) {
        window.$.DW.destroy();
      }
      this.liveIng = isLive;
      this.recordId = null;
      this.taskId = null;
      this.summaryData = null;
      if (isLive) {
        this.createdLive();
      } else {
        this.recordId = recordId;
        this.taskId = taskId;
        this.createdLiveBack();
        if(this.taskId && this.recordId) {
          this.getLiveBackSummaryStatus()
        }
      }
    },
    // 观看直播信息
    lookLiveInfo() {
      this.$refs.LiveInfo.dialogVisible = true;
    },
    // 手机端观看二维码
    mobileLookLive() {
      this.$refs.QRCode.dialogVisible = true;
    },
    // 时间格式化
    formatDate(value) {
      return this.$dayjs.duration(value).format('HH:mm:ss', { trim: false });
    },
    // 数字转化
    chineseIndex(index) {
      const units = ["", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
      const tenths = ["", "十", "百", "千", "万", "亿"];
      if (index < 10) {
        return units[index];
      } else if (index < 20) {
        return tenths[1] + units[index - 10];
      } else {
        // 这里可以继续扩展以支持更大的数字
      }
    },
    // 结束集体备课
    async endTeachVideoFn() {
      try {
        const params = {
          objectId: this.detailsData.objectId,
        };
        await endTeachVideo(params);
        this.updateData();
      } catch (error) {
        console.error(error);
      }
    },
    // 下载回放总结
    async downloadFile() {
      let downloadLoadingInstance = Loading.service({
        text: '正在下载数据，请稍候',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      try {
        const params = {
          recordId: this.recordId,
          taskId: this.taskId
        }
        const resData = await downContent(params);
        console.log(resData);
        let fileName = '会议AI文稿.txt';
        //这里res.data是返回的blob对象
        var blob = new Blob([resData.data], {
          type: 'text/plain;charset=utf-8',
        });
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
          var downloadElement = document.createElement('a');
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.style.display = 'none';
          downloadElement.href = href;
          downloadElement.download = fileName; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        }
        downloadLoadingInstance.close();
      } catch (error) {
        this.$message.error('下载文件出现错误，请联系管理员!');
        downloadLoadingInstance.close();
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.videoArea {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  .areaLeft {
    width: 1026px;
    .areaInfo {
      width: 1026px;
      height: 109px;
      padding-top: 24px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .areaRgtBtn {
        display: flex;
        align-items: center;
      }
      .customBtn {
        padding: 10px 12px;
        margin-left: 16px;
      }
      ::v-deep .customBtn.el-button span {
        margin-left: 0;
      }
      .title {
        height: 28px;
        display: flex;
        align-items: center;
        color: $text-title-color;
        font-size: 20px;
        font-weight: 600;
      }
      .other {
        display: flex;
        align-items: center;
        margin-top: 8px;
        .look {
          font-size: 14px;
          line-height: 21px;
          font-weight: 400;
          color: $text-color;
          display: flex;
          align-items: center;
          img {
            widows: 14px;
            height: 14px;
            margin-right: 4px;
          }
        }
      }
    }
    .areaPlay {
      width: 1026px;
      background: #000;
      position: relative;
      .lockArea {
        position: absolute;
        width: 100%;
        height: 768px;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        top: 0;
        left: 0;
      }
      .videoPlay {
        width: 100%;
        height: 768px;
        position: relative;
        z-index: 8;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        img {
          width: 100%;
          height: 768px;
          object-fit: cover;
        }
      }
      .option {
        height: 68px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        background: #fff;
        box-shadow: $box-shadow;
        border-radius: 8px;
      }
    }
  }
  .areaRgt {
    width: 326px;
    .areaUser {
      width: 100%;
      height: 109px;
      padding-top: 33px;
      box-sizing: border-box;
      display: flex;
      .userHead {
        width: 56px;
        height: 56px;
        border-radius: 50%;
      }
      .userInfo {
        margin-left: 12px;
        .name {
          font-size: 20px;
          font-weight: 600;
          line-height: 28px;
          color: $text-title-color;
        }
        .info {
          margin-top: 4px;
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: $text-color;
        }
      }
    }

    .areaDiscuss {
      width: 326px;
      height: 768px;
      box-shadow: $box-shadow;
      background: #fff;
      border-radius: 8px;
      box-sizing: border-box;

      .tabPaneItem {
        height: 718px;
        overflow: auto;
        padding-top: 12px;
        padding-bottom: 12px;
        box-sizing: border-box;
      }

      .lockArea {
        position: absolute;
        width: 100%;
        height: 706px;
        background: rgba(255, 255, 255, 1);
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $text-color;
        font-size: 14px;
      }
      ::v-deep .el-tabs__nav {
        width: 100%;
      }
      ::v-deep .el-tabs__item {
        padding: 0 24px;
      }
      ::v-deep .el-timeline {
        padding-left: 28px;
      }
      ::v-deep .el-timeline-item__wrapper {
        padding-left: 18px;
      }
      .playbackItem {
        width: 250px;
        height: 65px;
        padding: 12px 8px;
        border-radius: 4px;
        box-sizing: border-box;
        cursor: pointer;
        margin-bottom: 10px;
        &:hover {
          background: #ebf3fe;
        }
        .title {
          width: 236px;
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          img {
            width: 15px;
            height: 15px;
            margin-right: 5px;
            vertical-align: middle;
          }
        }
        .time {
          margin-top: 6px;
          padding-left: 20px;
          box-sizing: border-box;
        }
      }
      .active {
        background: #ebf3fe;
      }
      .userCard {
        width: 100%;
        height: 36px;
        margin-bottom: 12px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        .userHead {
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }
        .userInfo {
          margin-left: 8px;
          font-size: 0;
          .info {
            color: $text-color;
            font-size: 10px;
            font-weight: 400;
          }
          .initiator {
            border-radius: 2px;
            display: inline-block;
            color: $text-color-primary;
            background: #d7e8fc;
            font-size: 10px;
            white-space: nowrap;
            padding: 3px 6px;
          }
          .name {
            color: $text-title-color;
            margin-top: 2px;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
          }
        }
      }
      .summary {
        width: 100%;
        padding: 0 20px 10px;
        box-sizing: border-box;
        .download-area {
          padding: 0 8px 12px;
          display: flex;
          align-items: center;
          .tips {
            color: #888;
            font-size: 10px;
          }
        }

        .summaryContent {
          padding: 0 8px 12px;
          font-size: 14px;
          color: $text-color;
        }

        .chapterItem {
          padding: 12px 8px;
          box-sizing: border-box;
          border-top: 1px solid $page-background-color;
          cursor: pointer;
          &:hover {
            background: #ebf3fe;
          }
          .name {
            font-size: 14px;
            color: $text-color;
          }
          .time {
            margin-top: 10px;
            color: $text-color-secondary;
            color: 12px;
          }
        }
      }
    }
  }
}
</style>
